<template>
  <main class="h-page-header">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); background-color: #ffffff"
      :title="title"
      :breadcrumb="{ routes }"
    >
      <slot></slot>
    </a-page-header>
  </main>
</template>

<script setup lang="ts">
import { withDefaults, defineProps } from "vue";

type routeType = {
  path: string;
  breadcrumbName: string;
};
interface Props {
  title: string;
  routes: Array<routeType>;
}
withDefaults(defineProps<Props>(), {
  title: "",
  routes: () => [{ path: "home", breadcrumbName: "首页" }],
});
</script>

<style lang="scss" scoped>
.h-page-header {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
</style>